<template>
  <view class="flexR-FS-C form-item">
    <view class="workOrder-pic flexR-W-FS">
      <u-image v-if="handleUp" width="198rpx" height="198rpx" @click="handleAddPic()" :src="addSrc" class="up-action">
      </u-image>
      <view class="workOrder-pic-item" v-for="(item, index) in  picList" :key="item.id">
        <u-image class="img-list" width="198rpx" height="198rpx" :src="item.filePath"
          @click="handleShowPic(index, picList)">
        </u-image>
        <u-image class="pic-delete" width="40rpx" height="40rpx" :src="deleteSrc" @click="handleDeletePic(index)"
          v-if="isDelete">
        </u-image>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    mapActions
  } from "vuex";
  import {
    orderStateOptions
  } from "@/configs/comData.js"
  import ENV from '@/configs/index.js'
  import {
    showErrorToast
  } from '@/utils'
  import {
    fileToBase64,
    imageCompress,
    calcImgs
  } from "@/utils/blob.js"
  export default {
    data() {
      return {
        deleteSrc: require('@/static/images/delete.png'),
        addSrc: require('@/static/images/addPic.png'),
        picList: [],
      }
    },
    watch: {
      initPicList(newValue, oldValue) {
        if (newValue.length > 0) {
          newValue.map(item => item.filePath = item.value)
          this.picList = newValue;
        } else {
          this.picList = []
        }
      }
    },
    created: function() {
      if (this.initPicList.length > 0) {
        this.initPicList.map(item => item.filePath = item.value)
        this.picList = this.initPicList
      } else {
        this.picList = []
      }
    },
    props: {
      initPicList: {
        type: Array,
        default: []
      },
      maxNum: {
        type: Number,
        default: 1
      },
      modelFlag: {
        type: String,
        default: ''
      },
      isDelete: {
        type: Boolean,
        default: true
      },
      handleUp: {
        type: Boolean,
        default: true
      },
    },
    methods: {
      // 删除照片
      handleDeletePic(value) {
        if (this.continueBuy == true) {
          this.newPicArr.splice(value, 1)
        } else {
          this.picList.splice(value, 1)
        }
      },
      // 添加图片
      handleAddPic() {
        const that = this
        if (that.picList.length != this.maxNum) {
          uni.chooseImage({
            count: this.maxNum - that.picList.length,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            // sourceType: ['camera'],
            success(res) {
              that.getPicData(res.tempFiles[0]);
            }
          })
        } else {
          showErrorToast(`最多上传${this.maxNum}张图片`);
        }
      },
      async getPicData(file) {
        var oFile = file;
        const fileSizeMB = file.size / 1024 / 1024;
        // 大于1M压缩
        if (fileSizeMB > 1) {
          oFile = await imageCompress(oFile);
        }
        var form = new FormData();
        form.append("FILE", oFile);
        form.append("bucketId", 'c641f2ea-5853-d1d5-d52b-3a015432db8b');
        this.imgsFileUpload_store(form).then((res) => {
          if (res && res[0].filePath) {
            if (!this.isDelete) {
              this.picList = [];
            }
            this.picList.push(...res);
            if (!this.isDelete) {
              this.$emit("pChangePic", this.modelFlag)
            }
          } else {
            console.log(res);
          }
        }).catch(error => console.log(error));
      },
      // 父级调用
      getFileList() {
        const that = this;
        return new Promise((resolve, reject) => {
          let newPicList = []
          that.picList.forEach((item, index) => {
            newPicList.push({
              "type": "OSS", // 项目引用 Equipment: 设备、Order：工单、PIC：base64图像、OSS
              "value": item.id, // 对应值
              "orderIndex": index, // 多个设备时需要用到排序号，默认 0
              "model": that.modelFlag
            })
          })
          resolve(newPicList)
        })
      },
      // 展示照片
      handleShowPic(index, list) {
        let arr = list.map(item => item.filePath+'?m=1');
        uni.previewImage({
          current: list[index].filePath,
          indicator: "number",
          loop: true,
          urls: arr
        })
      },
      ...mapActions({
        imgsFileUpload_store: "workOrder/imgsFileUpload_store", // 图片上传
      })
    }
  }
</script>
<style scoped lang="scss">
  .form-item {
    width: 100%;
    font-size: 30rpx;
    margin-bottom: 20rpx;

    .up-action {
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }

    .mobole-link {
      color: #3F7DF5;
      text-decoration: none;
      margin-left: 14rpx;
    }

    .content-tag {
      border: 1px solid #166FFF;
      padding: 6rpx 20rpx;
      color: #166FFF;
      border-radius: 20rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }

  .workOrder-pic {
    width: 688rpx;
    background: #FFFFFF;
    box-sizing: border-box;

    .workOrder-pic-item {
      width: 198rpx;
      height: 198rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
      position: relative;

      .pic-delete {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 5;
      }
    }

    .workOrder-pic-item:nth-of-type(3n) {
      margin-right: 0;
    }
  }
</style>
